<template>
    <h2>登录页面</h2>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>联系电话</td>
                <td>
                    <input type="text" v-model="form.phone" placeholder="请输入联系方式">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="form.password" placeholder="请输入密码">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="btn btn-primary" @click="Add">登录</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
import axios from "axios"
import { useRouter } from "vue-router";

const router = useRouter();
const form = reactive({
    phone: "",
    password: "",

})
const Add = () => {
    if (!form.phone) {
        alert("联系电话不能为空！！");
        return;
    }
    if (!form.password) {
        alert("密码不能为空！！");
        return;
    }

    axios.get("http://localhost:5028/api/LoginLogin?phone=" + form.phone + "&Pwd=" + form.password).then(res => {
        if (res.data == 1) {
            alert("登录成功！！");
            router.push("/loginShow");
        }
        else if (res.data == -1) {
            alert("用户名错误")
        }
        else if (res.data == -2) {
            alert("密码错误")
        }
        else {
            alert("登录失败！");
        }
    })
}

</script>